<template>
  <div>
    <!-- 弹出层  切换联赛 -->
    <van-popup
     v-model="show"
      position="right"
      :overlay="true"
      closeable
      close-icon-position="top-left"
      :style="{width:'100%',height:'100%'}"
    >
      <!-- 切换联赛组件 -->
      <SwitchLeague></SwitchLeague>
    </van-popup>

    <!-- 导航栏 -->
    <van-nav-bar title="服务"  class="TopNav">
      <template #left>
        <van-icon name="exchange" size="18" color="white" @click="showPopup"/>
      </template>
    </van-nav-bar>

    <!-- <h1>这是serve 页面</h1> -->
    <van-search placeholder="请输入搜索关键词" v-model="value" input-align="center"/>

    <van-tabs v-model="active">

      <!-- 保险售卖页 -->
      <van-tab title="保险">
        <insurance></insurance>
      </van-tab>

      <!-- 篮球售卖页 -->
      <van-tab title="篮球">
        <basketball></basketball>
      </van-tab>

      <!-- 护具售卖页 -->
      <van-tab title="护具">
        <protective></protective>
      </van-tab>

      <!-- 定制内容售卖页 -->
      <van-tab title="定制">
        <customize></customize>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import SwitchLeague from '@/components/Switch_League/Switch_League.vue'

import insurance from '@/components/insurance/Cmpts-insurance.vue'
import basketball from '@/components/basketball/Cmpts-basketball.vue'
import protective from '@/components/Protective/Cmpts-protectiveGear.vue'
import customize from '@/components/customize/Cmpts-bcustomize.vue'

export default {
  name: 'view_serve',
  data () {
    return {
      show: false,
      value: '搜索联赛，球队，比赛，用户',
      active: 0
    }
  },
  components: {
    basketball,
    protective,
    customize,
    insurance,
    SwitchLeague
  },
  methods: {
    showPopup () {
      this.show = true
      console.log(this.logoindex)
    }
  }

}
</script>

<style scoped>
  .TopNav {
  background-color: black;
}

::v-deep .van-nav-bar__title{
  color: rgb(255, 255, 255);
}
</style>
